import React, { useEffect, useState } from 'react'
import { Table, Tag, Button, Modal, Popover, Switch } from 'antd'
import { EditOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import axios from 'axios'
const { confirm } = Modal
export default function RightList() {
    const [dataSource, setdataSource] = useState([])
    useEffect(() => {
        query()
    }, [])

    const query = () => {
        axios.get('/rights?_embed=children').then(res => {
            res.data.forEach(item => {
                return item.children.length === 0 ? item.children = '' : item.children
            })
            setdataSource(res.data)
        })
    }
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '权限名称',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '权限路径',
            dataIndex: 'key',
            key: 'key',
            render: (key) => <Tag color='orange'>{key}</Tag>
        },
        {
            title: '操作',
            render: (item) => {
                return <div>
                    <Popover style={{ textAlign: 'center' }} content={() => {
                        return <Switch checked={item.pagepermisson} onChange={() => swichMethod(item)}></Switch>
                    }} title="配置页面项" trigger={item.pagepermisson ? 'click' : ''}>
                        <Button disabled={!item.pagepermisson} onClick={() => { }} style={{ margin: '4px' }} type="primary" shape="circle" icon={<EditOutlined />} />
                    </Popover>

                    <Button onClick={() => confirmMethod(item)} style={{ margin: '4px' }} type="danger" shape="circle" icon={<DeleteOutlined />} />
                </div >
            }
        },
    ];

    const confirmMethod = (item) => {
        confirm({
            title: '您确定要删除掉吗',
            icon: <ExclamationCircleOutlined />,
            content: '一旦删除将不可恢复',
            onOk() {
                deleteReady(item)
            },
            onCancel() {

            },
        });
    }
    const deleteReady = (item) => {
        console.log(item)
        if (item.grade === 1) {
            axios.delete(`/rights/${item.id}`).then(() => {
                query()
            })
            return
        }
        axios.delete(`/children/${item.id}`).then(() => {
            query()
        })
    }

    const swichMethod = (item) => {
        item.pagepermisson = item.pagepermisson === 1 ? 0 : 1
        setdataSource([...dataSource])
        if (item.grade === 1) {
            axios.patch(`/rights/${item.id}`, {
                pagepermisson: item.pagepermisson
            })
            return
        }
        axios.patch(`/children/${item.id}`, {
            pagepermisson: item.pagepermisson
        })
    }
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
                pageSize: 10
            }} />
        </div>
    )


}
